<template>
    <div class="category-admin-container">
        <el-button type="primary" @click="openAddDialog">新增分類</el-button>
        <el-table :data="categories" style="margin-top: 20px;">
            <el-table-column prop="name" label="名稱" />
            <el-table-column prop="description" label="描述" />
            <el-table-column prop="image" label="圖片">
                <template #default="{ row }">
                    <img :src="row.image" class="avatar-thumb" style="width:60px;height:40px;object-fit:cover;" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="openEditDialog(scope.row)">編輯</el-button>
                    <el-button type="danger" size="small" @click="deleteCategory(scope.row.id)" style="margin-left: 8px;">刪除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 新增/編輯彈窗 -->
        <el-dialog v-model="dialogVisible" :title="isEdit ? '編輯分類' : '新增分類'">
            <el-form :model="form" style="width:340px;margin:0 auto;">
                <el-form-item label="名稱">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="form.description" />
                </el-form-item>
                <el-form-item label="圖片">
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:10010/edu_oss/fileoss/upload"
                            :show-file-list="false"
                            :on-success="handleImageSuccess"
                            :headers="uploadHeaders"
                    >
                        <img v-if="form.image" :src="form.image" style="width:60px;height:40px;object-fit:cover;" />
                        <div v-else style="width:60px;height:40px;display:flex;align-items:center;justify-content:center;border:1px dashed #d9d9d9;cursor:pointer;">
                            <i class="el-icon-plus" style="font-size:24px;"></i>
                            <span style="margin-left:4px;">上傳</span>
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveCategory">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const categories = ref([])
const dialogVisible = ref(false)
const isEdit = ref(false)
const form = ref({ id: '', name: '', description: '', image: '' })

const uploadHeaders = { Authorization: 'Bearer ' + (typeof localStorage !== 'undefined' ? localStorage.getItem('token') || '' : '') }

const fetchCategories = async () => {
    const res = await axios.get('http://localhost:10010/flower/category/list')
    if (res.data && res.data.success) {
        categories.value = res.data.data.list
    }
}
const openAddDialog = () => {
    isEdit.value = false
    form.value = { id: '', name: '', description: '', image: '' }
    dialogVisible.value = true
}
const openEditDialog = (row) => {
    isEdit.value = true
    // 保證 image 屬性存在
    form.value = { id: row.id, name: row.name, description: row.description, image: row.image || '' }
    dialogVisible.value = true
}
const handleImageSuccess = (response) => {
    if (response.data && response.data.url) {
        form.value.image = response.data.url
    }
}
const saveCategory = async () => {
    if (isEdit.value) {
        await axios.post('http://localhost:10010/flower/category/update', form.value)
    } else {
        await axios.post('http://localhost:10010/flower/category/add', form.value)
    }
    dialogVisible.value = false
    fetchCategories()
}
const deleteCategory = async (id) => {
    await axios.post(`http://localhost:10010/flower/category/delete/${id}`)
    fetchCategories()
}
onMounted(fetchCategories)
</script>

<style scoped>
.category-admin-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.el-table th, .el-table td {
  text-align: center;
}
.avatar-thumb {
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.action-btns .el-button {
  margin-right: 8px;
}
.el-dialog__body {
  padding: 24px 32px 8px 32px;
}
.el-form-item {
  margin-bottom: 18px;
}
</style>